<template>
  <div class="common-title">
    选择退出原因
  </div>

  <div class="tips">
    <span>*</span>
    "退出日间"是指由于各种因素，患者无法继续完成日间手术全部流程而执行的终止操作，可能将无法撤销。患者退出日间后，如想再进入日间，需要重新门诊挂号
  </div>

  <div v-loading="state.loading">
    <el-form ref="roleDialogFormRef" :model="state.ruleForm" size="default" label-width="120px" label-position="top">

      <div v-for="(type, index) in state.problemsList" :key="index">
        <div class="main-title">
          {{ type.label }}
        </div>

        <el-form-item v-for="(items, index) in type.item" :label="items.label" :key="index">
          <el-radio-group v-model="state.ruleForm[type.label + items.label]">
            <el-radio v-for="(it, index) in items.item" :label="it.id" :key="index" value-key="id" @click.prevent="changeRadio(type.label + items.label,it.id)">
              {{ it.name }}
            </el-radio>
            <div v-for="(it, ind) in items.item" :key="ind">
              {{ it }}
              <el-input v-if="it.name == '其他' && it.id == state.ruleForm[type.label + items.label]"
                v-model="state.textObj[it.id]" placeholder="" clearable style="width:200px;"></el-input>
              <el-input v-if="it.name == '其他退出' && it.id == state.ruleForm[type.label + items.label]"
                v-model="state.textObj[it.id]" placeholder="具体描述原因" clearable style="width:500px;"
                type="textarea"></el-input>
            </div>
          </el-radio-group>
        </el-form-item>
      </div>


      <div class="flex justify-start" style="margin-top: 20px;">
        <el-button type="primary" :loading="state.btnLoading" @click="onSubmit">确认退出</el-button>
        <el-button @click="cancelSubmit">撤销退出</el-button>
      </div>


    </el-form>
  </div>
</template>

<script setup name="exitDaytime">
import { toolsApi } from '/@/api/tools'
import { dsApi } from '/@/api/ds'
import { ElMessage } from 'element-plus'

const props = defineProps({
  datas: {
    type: Object,
    default: () => { },
  },
});

// 定义子组件向父组件传值/事件

const state = reactive({
  detailId: '',
  detailData: '',
  ruleForm: {

  },
  loading: false,
  problemsList: [],
  btnLoading: false,
  textObj: {

  }
})
const route = useRoute();


// 页面加载时
onMounted(() => {
  state.detailId = route.query.id ? route.query.id : props.datas.id
  getProblems()
  getDetail()
});



const getProblems = () => {
  state.loading = true
  toolsApi().patientDischargeProblem().then(res => {
    state.loading = false
    state.problemsList = res.data

  }).catch(() => {
    state.loading = false
  })
}


const setFormData = () => {
  const formDatas = {}
  state.detailData.dischargeProblemAnswer.forEach(item => {
    formDatas[item.dischargeProblemsItem.patientDischargeProblem.group + item.dischargeProblemsItem.patientDischargeProblem.title] = item.dischargeProblemsItem.id
    if (item.text) {
      state.textObj[item.dischargeProblemsItem.id] = item.text
    }
  });
  // console.log('formDatas',formDatas)
  state.ruleForm = formDatas
}

const getDetail = () => {
  dsApi().recordDetail({ prid: state.detailId }).then(res => {
    state.detailData = res.data
    if (res.data.dischargeProblemAnswer) {
      setFormData()
    }
  }).catch(() => {
  })
}

const changeRadio = (key,value) => {
  console.log(state.ruleForm[key])
  if(state.ruleForm[key] && state.ruleForm[key] != undefined && state.ruleForm[key] == value){
    delete state.ruleForm[key] 
  }else{
    state.ruleForm[key] = value
  }
}

const onSubmit = () => {
  const keysList = Object.keys(state.ruleForm)
  console.log('keysList', keysList)

  if (keysList.length == 0) {
    ElMessage.warning('有选项未填写');
  } else {

    // console.log('检验通过!')
    const problemAnswer = []
    for (const key in state.ruleForm) {
      const valueItem = state.ruleForm[key]
      problemAnswer.push({
        patientDischargeProblemsItemId: valueItem,
        text: ''
      })
    }

    // console.log('problemAnswer', problemAnswer)

    problemAnswer.forEach(item => {
      for (const key in state.textObj) {
        const valueItem = state.textObj[key]
        if (item.patientDischargeProblemsItemId == key) {
          item.text = valueItem
        }
      }
    })
    const apiData = {
      prid: state.detailData.id,
      problemAnswer: problemAnswer
    }
    // console.log('apiData', apiData)
    state.btnLoading = true
    state.loading = true
    dsApi().discharge(apiData).then(res => {
      state.btnLoading = false
      state.loading = false
      ElMessage.success('操作成功');
      state.ruleForm = {}
      state.textObj = {}
      getDetail()
    }).catch(err => {
      state.btnLoading = false
      state.loading = false
    })


  }

}

const cancelSubmit = () => {
  state.ruleForm = {}
}

</script>

<style lang="scss" scoped>
.tips {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
  font-weight: bold;

  span {
    color: red;
  }
}

.main-title {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  margin: 20px 0;
}
</style>
